<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            background-color: #f5f5f5;
            background-image: url("../CSS的图片/登录背景.webp");
            background-repeat: no-repeat;
            background-size: cover;
        }

        .log {
         
           
            width: 30%;
            height: 600px;
            background-color: white;
            display: flex;
            flex-direction: column;
            align-items: center;
            border-radius: 20px;
            margin: auto;
        }

        #log {
            display: flex;
            flex-direction: column;
            width: 100%;
            height: 400px;
            
            display: flex;
            align-items: center;

        }

        #log input[type=text],
        #log input[type=password] {
            border-radius: 12px;
            outline: 0;
            margin: 30px;
            width: 80%;
            height: 50px;
        }

        #log input[type=submit] {
            cursor: pointer;
            width: 200px;
            border-radius: 20px;
            height: 60px;
            outline: 0;
            font-size: 25px;
            font-weight: 700;
            background-color: brown;
            color: white;
            margin: 60px;

        }
        .log_mode{
            display: flex;
            width: 100%;
            justify-content: space-evenly;
            align-items: center;
            height: 100px;
            
        }
        .log_mode h1{
            cursor: pointer;
            width: 30%;
            font-size:20px;
            font-style: italic;
         
            text-align: center;
            color: gray;
        }
        #rule{
            width: 100%;
            height: 100px;
        
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .log_mode .cur{
            font-size: 25px;
            color: orange;
        }
        #register{
            display: flex;
            flex-direction: column;
            width: 100%;
            height: 400px;
           
            display: none;
            align-items: center;
        }
        #register input[type=text],#register input[type=password]{
            border-radius: 12px;
            outline: 0;
            margin: 30px;
            width: 80%;
            height: 50px;
        }
        #register input[type=submit]{
            cursor: pointer;
            width: 200px;
            border-radius: 20px;
            height: 60px;
            outline: 0;
            font-size: 25px;
            font-weight: 700;
            background-color: brown;
            color: white;
           
        }
        @media(max-width:900px){
            .log{
                width: 100%;
            }
        }
    </style>
</head>

<body>
    <div class="log">
        <div class="log_mode">
            <h1 class="log_mode1 cur">账号登录</h1>
            <h1 class="log_mode2">账号注册</h1>
        </div>
        <form id="log">
            <input type="text" placeholder="手机:">
            <input type="password" placeholder="密码:">
            <input type="submit" value="点击登录">
           
        </form>
        <form id="register">
            <input type="text" placeholder="手机:">
            <input type="text" placeholder="验证码:">
            <input type="password" placeholder="设置密码:">
            <input type="submit" value="点击注册">
        </form>
        <form id="rule">
            <label for=""><input type="checkbox" class="radio"></label>
            <p class="text">同意</p>
            <p class="text" style="color: red;">《yyds政策》和《HappyLife政策》</p>
        </form>
    </div>
    <script>
        var log_mode1 = document.querySelector(".log_mode1")
        var log_mode2 = document.querySelector(".log_mode2")
        var log = document.getElementById("log")
        var register = document.getElementById("register")
        log_mode1.onclick = ()=>{
            log_mode2.classList.remove("cur")
            log_mode1.classList.add("cur")
            register.style.display = "none"
            log.style.display = "flex"
        }
        log_mode2.onclick = ()=>{
            log_mode1.classList.remove("cur")
            log_mode2.classList.add("cur")
            log.style.display = "none"
            register.style.display = "flex"
            
        }
      
    </script>
</body>

</html>